<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>observeUntil | Introduction</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.2.0">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-edit-link/plugin.css">
        
    
    

        
    
    
    <link rel="next" href="../refguide/expr.html" />
    
    
    <link rel="prev" href="../refguide/observe-async.html" />
    

        
    </head>
    <body>
        
        
    <div class="book" data-level="4.6" data-basepath=".." data-revision="Thu Oct 01 2015 21:51:50 GMT+0200 (CEST)">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
        
        
        

        

        
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" >
            
            <span><b>1.</b> Introduction to Mobservable</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        Why Mobservable?
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="intro/overview.html">
            
                
                    <a href="../intro/overview.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        The Gist of Mobservable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="intro/concepts.html">
            
                
                    <a href="../intro/concepts.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        Concepts &amp; Principles
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" >
            
            <span><b>2.</b> The Basics: Making stuff Reactive</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="core/reactive-state.html">
            
                
                    <a href="../core/reactive-state.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        Reactive Data Structures
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="core/reactive-views.html">
            
                
                    <a href="../core/reactive-views.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        Reactive Views
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="core/reactive-component.html">
            
                
                    <a href="../core/reactive-component.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        Reactive Components
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" >
            
            <span><b>3.</b> Core API</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="refguide/make-reactive.html">
            
                
                    <a href="../refguide/make-reactive.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        makeReactive
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="refguide/observe.html">
            
                
                    <a href="../refguide/observe.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        observe
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="refguide/observable.html">
            
                
                    <a href="../refguide/observable.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        @observable
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="refguide/reactive-component.html">
            
                
                    <a href="../refguide/reactive-component.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        @reactiveComponent
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" >
            
            <span><b>4.</b> Advanced API</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.1" data-path="refguide/is-reactive.html">
            
                
                    <a href="../refguide/is-reactive.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                        isReactive
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.2" data-path="refguide/extend-reactive.html">
            
                
                    <a href="../refguide/extend-reactive.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.2.</b>
                        
                        extendReactive
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.3" data-path="refguide/modifiers.html">
            
                
                    <a href="../refguide/modifiers.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.3.</b>
                        
                        modifiers
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.4" data-path="refguide/transactions.html">
            
            <span><b>4.4.</b> transactions</span>
            
            
        </li>
    
        <li class="chapter " data-level="4.5" data-path="refguide/observe-async.html">
            
                
                    <a href="../refguide/observe-async.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.5.</b>
                        
                        observeAsync
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="4.6" data-path="refguide/observe-until.html">
            
                
                    <a href="../refguide/observe-until.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.6.</b>
                        
                        observeUntil
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.7" data-path="refguide/expr.html">
            
                
                    <a href="../refguide/expr.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.7.</b>
                        
                        expr
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.8" data-path="refguide/strict.html">
            
                
                    <a href="../refguide/strict.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.8.</b>
                        
                        strict
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.9" data-path="refguide/tojson.html">
            
                
                    <a href="../refguide/tojson.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.9.</b>
                        
                        toJSON
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4.10" data-path="refguide/extras.html">
            
                
                    <a href="../refguide/extras.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.10.</b>
                        
                        debug utilities
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="5" >
            
            <span><b>5.</b> Best Practices For Large Apps</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="5.1" data-path="best/store.html">
            
                
                    <a href="../best/store.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.1.</b>
                        
                        Definging data stores
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.2" data-path="best/actions.html">
            
                
                    <a href="../best/actions.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.2.</b>
                        
                        Writing (async) actions
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.3" data-path="best/components.html">
            
                
                    <a href="../best/components.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.3.</b>
                        
                        Organizing React components
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5.4" >
            
            <span><b>5.4.</b> Universal applications --&gt;</span>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="6" >
            
            <span><b>6.</b> How does Mobservable work?</span>
            
            
        </li>
    
        <li class="chapter " data-level="7" >
            
            <span><b>7.</b> Tips &amp; Tricks</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="7.1" data-path="best/devtools.html">
            
                
                    <a href="../best/devtools.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.1.</b>
                        
                        DevTools
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="7.2" data-path="best/syntax.html">
            
                
                    <a href="../best/syntax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.2.</b>
                        
                        ES6 &amp; TypeScript goodies
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="7.3" >
            
            <span><b>7.3.</b> Tracking state changes</span>
            
            
        </li>
    
        <li class="chapter " data-level="7.4" >
            
            <span><b>7.4.</b> Predicates</span>
            
            
        </li>
    
        <li class="chapter " data-level="7.5" >
            
            <span><b>7.5.</b> Performance considerations</span>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="8" data-path="LINKS.html">
            
                
                    <a href="../LINKS.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                        Resources
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9" data-path="faq/faq.html">
            
                
                    <a href="../faq/faq.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.</b>
                        
                        Frequently Asked Questions
                    </a>
            
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                Published with GitBook
            </a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Table of Contents"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Font Settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Share"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">
                    Share on Twitter
                </button>
                <button type="button" data-sharing="google-plus" class="button">
                    Share on Google
                </button>
                <button type="button" data-sharing="facebook" class="button">
                    Share on Facebook
                </button>
                <button type="button" data-sharing="weibo" class="button">
                    Share on Weibo
                </button>
                <button type="button" data-sharing="instapaper" class="button">
                    Share on Instapaper
                </button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Google"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
    
    
    


    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >Introduction</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <a id="edit-link" href="https://github.com/mweststrate/mobservable/tree/gh-pages/docs/refguide/observe-until.md" class="btn fa fa-edit pull-left">&nbsp;&nbsp;Edit This Page</a>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../refguide/observe-async.html" class="navigation navigation-prev " aria-label="Previous page: observeAsync"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../refguide/expr.html" class="navigation navigation-next " aria-label="Next page: expr"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-ga/plugin.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-disqus/plugin.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-edit-link/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2},"edit-link":{"base":"https://github.com/mweststrate/mobservable/tree/gh-pages/docs","label":"Edit This Page"},"ga":{"token":"UA-65632006-1","configuration":"auto"},"disqus":{"shortName":"mobservable"}};
    gitbook.start(config);
});
</script>

        <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-65632006-1', 'auto');ga('send', 'pageview');</script>
    </body>
    
</html>
